package com.example.composeplayground.screens.main

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.paint
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.em
import androidx.compose.ui.unit.sp
import com.example.composeplayground.R
import com.example.composeplayground.ui.theme.MontserratFamily

@Preview
@Composable
fun HomeScreen() {
    Column {
        Column(
            modifier = Modifier
                .shadow(
                    elevation = 10.dp,
                    shape = RoundedCornerShape(
                        bottomStart = 20.dp,
                        bottomEnd = 20.dp
                    )
                )
                .clip(
                    shape = RoundedCornerShape(
                        bottomStart = 20.dp,
                        bottomEnd = 20.dp
                    )
                )
                .background(Color(0xFFFFFFFF))
        ) {
            Box(
                modifier = Modifier
                    .wrapContentSize()
                    .clip(
                        shape = RoundedCornerShape(
                            bottomStart = 20.dp,
                            bottomEnd = 20.dp
                        )
                    )
                    .paint(
                        painter = painterResource(id = R.mipmap.img_home_bg),
                        contentScale = ContentScale.FillBounds
                    )
                    .padding(
                        top = 54.dp,
                        start = 12.dp,
                        bottom = 37.dp,
                        end = 12.dp
                    )
            ) {
                Box(
                    modifier = Modifier
                        .align(Alignment.TopEnd)
                        .wrapContentSize()
                ) {
                    Image(
                        painter = painterResource(id = R.mipmap.icon_default_head),
                        contentDescription = null,
                        modifier = Modifier
                            .width(40.dp)
                            .height(40.dp)
                            .clip(shape = CircleShape),
                        contentScale = ContentScale.FillBounds
                    )
                    Box(
                        modifier = Modifier
                            .clip(shape = CircleShape)
                            .width(10.dp)
                            .height(10.dp)
                            .background(color = Color(0xFFFF0000))
                            .align(Alignment.BottomEnd)
                    )
                }
                Column {
                    Text(
                        text = "Account Balance",
                        style = TextStyle(
                            color = Color(0xFFFFFFFF),
                            fontSize = 12.sp,
                            lineHeight = 1.em,
                            fontWeight = FontWeight.W700,
                            fontFamily = MontserratFamily
                        )
                    )
                    Row(
                        modifier = Modifier.padding(top = 10.dp)
                    ) {
                        Text(
                            text = "RM",
                            style = TextStyle(
                                color = Color(0xFFFFFFFF),
                                fontSize = 20.sp,
                                lineHeight = 1.em,
                                fontWeight = FontWeight.W400,
                                fontFamily = MontserratFamily
                            )
                        )
                        Text(
                            text = "0.00",
                            style = TextStyle(
                                color = Color(0xFFFFFFFF),
                                fontSize = 42.sp,
                                lineHeight = 1.em,
                                fontWeight = FontWeight.W400,
                                fontFamily = MontserratFamily
                            ),
                            modifier = Modifier.padding(start = 3.dp)
                        )
                    }
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.padding(top = 14.dp)
                    ) {
                        Box(
                            modifier = Modifier
                                .width(70.dp)
                                .height(24.dp)
                                .border(
                                    width = 1.dp,
                                    color = Color(0xFFFFFFFF),
                                    shape = RoundedCornerShape(
                                        size = 5.dp
                                    )
                                ),
                            contentAlignment = Alignment.Center
                        ) {
                            Text(
                                text = "Top Up",
                                style = TextStyle(
                                    color = Color(0xFFFFFFFF),
                                    fontSize = 12.sp,
                                    lineHeight = 1.em,
                                    fontWeight = FontWeight.W700,
                                    fontFamily = MontserratFamily
                                )
                            )
                        }
                        Text(
                            text = "View Account >",
                            style = TextStyle(
                                color = Color(0xFFFFFFFF),
                                fontSize = 12.sp,
                                lineHeight = 1.em,
                                fontWeight = FontWeight.W700,
                                fontFamily = MontserratFamily
                            ),
                            modifier = Modifier.padding(start = 10.dp)
                        )
                    }
                    Row(
                        modifier = Modifier
                            .padding(top = 10.dp)
                            .fillMaxWidth()
                    ) {
                        Row(
                            modifier = Modifier
                                .width(160.dp)
                                .border(
                                    width = 1.dp,
                                    color = Color(0xFFFFFFFF),
                                    shape = RoundedCornerShape(
                                        size = 5.dp
                                    )
                                )
                                .padding(vertical = 7.dp, horizontal = 10.dp),
                            verticalAlignment = Alignment.CenterVertically,
                            horizontalArrangement = Arrangement.SpaceBetween
                        ) {
                            Column {
                                Text(
                                    text = "Carbon Credit",
                                    style = TextStyle(
                                        color = Color(0xFFFFFFFF),
                                        fontSize = 12.sp,
                                        lineHeight = 1.em,
                                        fontWeight = FontWeight.W700,
                                        fontFamily = MontserratFamily
                                    )
                                )
                                Text(
                                    text = "RM0.00",
                                    style = TextStyle(
                                        color = Color(0xFFFFFFFF),
                                        fontSize = 10.sp,
                                        lineHeight = 1.em,
                                        fontWeight = FontWeight.W700,
                                        fontFamily = MontserratFamily
                                    )
                                )
                            }
                            Image(
                                painter = painterResource(id = R.mipmap.icon_gold_small),
                                contentDescription = null,
                                modifier = Modifier
                                    .width(22.dp)
                                    .height(22.dp),
                                contentScale = ContentScale.FillBounds
                            )
                        }
                        Row(
                            modifier = Modifier
                                .width(160.dp)
                                .padding(start = 9.dp)
                                .border(
                                    width = 1.dp,
                                    color = Color(0xFFFFFFFF),
                                    shape = RoundedCornerShape(
                                        size = 5.dp
                                    )
                                )
                                .padding(vertical = 7.dp, horizontal = 10.dp),
                            verticalAlignment = Alignment.CenterVertically,
                            horizontalArrangement = Arrangement.SpaceBetween
                        ) {
                            Column {
                                Text(
                                    text = "Green Energy",
                                    style = TextStyle(
                                        color = Color(0xFFFFFFFF),
                                        fontSize = 12.sp,
                                        lineHeight = 1.em,
                                        fontWeight = FontWeight.W700,
                                        fontFamily = MontserratFamily
                                    )
                                )
                                Text(
                                    text = "0 kWh",
                                    style = TextStyle(
                                        color = Color(0xFFFFFFFF),
                                        fontSize = 10.sp,
                                        lineHeight = 1.em,
                                        fontWeight = FontWeight.W700,
                                        fontFamily = MontserratFamily
                                    )
                                )
                            }
                            Image(
                                painter = painterResource(id = R.mipmap.icon_tea),
                                contentDescription = null,
                                modifier = Modifier
                                    .width(22.dp)
                                    .height(22.dp),
                                contentScale = ContentScale.FillBounds
                            )
                        }
                    }
                }
            }
            Column(
                modifier = Modifier
                    .padding(bottom = 27.dp)
            ) {
                Row(
                    horizontalArrangement = Arrangement.Center,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 36.dp)
                ) {
                    Text(
                        text = "Opps!",
                        style = TextStyle(
                            color = Color(0xFF333333),
                            fontSize = 20.sp,
                            lineHeight = 1.em,
                            fontWeight = FontWeight.W700,
                            fontFamily = MontserratFamily
                        )
                    )
                }
                Row(
                    horizontalArrangement = Arrangement.Center,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 8.dp)
                ) {
                    Text(
                        text = "You don’t have a vehicle registered with Elenergy yet.",
                        style = TextStyle(
                            color = Color(0xFF333333),
                            fontSize = 12.sp,
                            lineHeight = 1.em,
                            fontWeight = FontWeight.W400,
                            fontFamily = MontserratFamily
                        )
                    )
                }
                Row(
                    horizontalArrangement = Arrangement.Center,
                    modifier = Modifier
                        .fillMaxWidth(),
                ) {
                    Text(
                        text = "Add a car today to enjoy more features.",
                        style = TextStyle(
                            color = Color(0xFF333333),
                            fontSize = 12.sp,
                            lineHeight = 1.em,
                            fontWeight = FontWeight.W400,
                            fontFamily = MontserratFamily
                        )
                    )
                }
                Box(
                    modifier = Modifier
                        .padding(top = 41.dp, start = 24.dp, end = 24.dp)
                        .fillMaxWidth()
                        .wrapContentSize()
                ) {
                    Box(
                        contentAlignment = Alignment.Center,
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(45.dp)
                            .clip(shape = RoundedCornerShape(5.dp))
                            .background(color = Color(0xFF00988A))
                            .clickable {
                                println("haha")
                            }
                    ) {
                        Text(
                            text = "Add Vehicle",
                            style = TextStyle(
                                color = Color(0xFFFFFFFF),
                                fontSize = 17.sp,
                                lineHeight = 1.em,
                                fontWeight = FontWeight.W700,
                                fontFamily = MontserratFamily
                            )
                        )
                    }
                }
            }
        }
        Text(
            text = "Earn More", style = TextStyle(
                color = Color(0xFF333333),
                fontSize = 14.sp,
                lineHeight = 1.em,
                fontWeight = FontWeight.W700,
                fontFamily = MontserratFamily
            ),
            modifier = Modifier.padding(top = 27.dp, start = 12.dp)
        )
        LazyRow(
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            modifier = Modifier.padding(top = 12.dp)
        ) {
            val count = 3
            items(count) { index ->
                val paddindStart = if (index == 0) 12.dp else 0.dp
                val paddindEnd = if (index == count - 1) 12.dp else 0.dp
                Column(
                    modifier = Modifier
                        .padding(start = paddindStart, end = paddindEnd)
                        .clip(shape = RoundedCornerShape(size = 5.dp))
                        .width(302.dp)
                        .height(160.dp)
                        .paint(
                            painter = painterResource(id = R.mipmap.img_default),
                            contentScale = ContentScale.FillBounds
                        )
                        .padding(12.dp)
                ) {
                    Image(
                        painter = painterResource(id = R.mipmap.icon_tea),
                        contentDescription = null,
                        modifier = Modifier
                            .width(22.dp)
                            .height(22.dp),
                        contentScale = ContentScale.FillBounds
                    )
                    Text(
                        text = "A Green Energy Solution for EV Users",
                        style = TextStyle(
                            color = Color(0xFFFFFFFF),
                            fontSize = 14.sp,
                            lineHeight = 22.sp,
                            fontWeight = FontWeight.W700,
                            fontFamily = MontserratFamily
                        ),
                        modifier = Modifier.width(119.dp)
                    )
                }
            }
        }
        Text(
            text = "Tutorial", style = TextStyle(
                color = Color(0xFF333333),
                fontSize = 14.sp,
                lineHeight = 1.em,
                fontWeight = FontWeight.W700,
                fontFamily = MontserratFamily
            ),
            modifier = Modifier.padding(top = 31.dp, start = 12.dp)
        )
        Image(
            painter = painterResource(id = R.mipmap.img_tutorial_bg),
            contentDescription = null,
            modifier = Modifier
                .padding(top = 12.dp, start = 12.dp, end = 12.dp)
                .fillMaxWidth()
                .height(107.dp),
            contentScale = ContentScale.FillBounds
        )
    }
}